.header{
  background-color: #ffffff;
  &-adv{
    width: 100%;
  }
}
// .top-nav{
//   display: flex;
//   align-items: center;
//   .logo{
//     width: 150px;
//     // height: 60px;
//     // margin-top:10px;
//     // margin-bottom: 10px;
//   }
//   .nav{
//     margin-left:50px;
//     margin-top:20px;
//     flex:1;
//     display: flex;
//     .menu{
//       margin-top:10px;
//       flex:1;
//       .active{
//         color: $font-color-main;
//       }
//       .li{
//         padding: 0 10px 0 10px;
//       }
//       .li:hover{
//         color: $font-color-main;
//       }
//     }
//     .searchRuleForm{
//       width: 400px;
//     }
//   }
// }
.site-topbar{
  position: relative;
  z-index: 30;
  height: 40px;
  font-size: 12px;
  color: #888;
  background: #fafafa;
}
.topbar-nav{
  display: flex;
  justify-content: space-between;
  .dsshop-xia{
    color: #212121;
  }
  .menu{
    // flex:1;
    display: flex;
    align-items: center;
  height: 40px;
    .li{
      // padding: 0 10px 0 10px;
      // line-height: 40px;
      color: #212121;
      cursor: pointer;
      position: relative;
      .appcode{
        display: none;
        position: absolute;
        left: -30px;
        box-shadow: 0 1px 5px #aaa;
        text-align: center;
        font-size: 14px;
        line-height: 14px;
        color: #333;
        background-color: #ffffff;
        .padding{
          padding:10px;
        }
        p{
          padding-bottom: 10px;
        }
        img{
          width: 120px;
        }
      }
      a{
        color: #888;
      }
    }
    .li:hover{
      color: #888;
      .appcode{
        display: block;
      }
    }
  }
  .login{
    justify-content: right;
    display: flex;
    // align-items: center;
    .li{
      padding:0 5px 0 5px;
      line-height: 40px;
      color: #212121;
      // font-weight: bold;
      cursor:pointer;
      a{
        color: #888;
        .iconfont{
          font-size: 12px;
          margin-left:10px;
          position: relative;
          top:1px;
        }
      }
      // a:hover{
      //   color: #888;
      // }
    }
    .user{
      a{
        display: flex;
        padding: 0 10px 0 10px;
        span{
          display: inline-block;
          // width: 70px;
          color: #212121;
          text-align: center;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
      }
    }
    .user-menu-wrapper{
      background: #fafafa;
    }
    .user-menu{
      overflow: hidden;
      padding-bottom: 10px;
      .a{
        padding: 3px 30px;
        color: #212121;
        line-height: 2;
        cursor:pointer;
      }
      .a:hover{
        color: $font-color-main;
      }
    }
    .user-active{
      .user-name {
        // background: #ff888f;
        color: #212121;
        // width: 110px;
        text-align: center;
      }
      .user-name:hover{
        color: $font-color-main;
      }
    }
    .li:hover{
      // color: #ffffff;
    }
    .cart{
      color: #888;
      background: #fafafa;
      // line-height: 40px;
      // height: 40px;
      position: relative;
      .iconfont{
        margin-right: 5px;
      }
      .cart-navigation{
        cursor:pointer;
      }
      .cart-box{
        position: absolute;
        background-color: #ffffff;
        width: 400px;
        box-shadow: 0 2px 10px #fafafa;
        overflow: hidden;
        right: 0;
        .cart-list{
          padding:10px;
          .cart-li{
            font-size: 12px;
            display: flex;
            align-items: center;
            color: #424242;
            border-bottom: 1px solid #e0e0e0;
            position: relative;
            .image{
              margin-top:20px;
              width: 45px;
              margin-right: 10px;
              image{
                width: 100%;
              }
            }
            .title{
              line-height: 18px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              margin-right: 20px;
              width: 120px;
              color: #424242;
            }
            .title:hover{
              color: $font-color-main;
            }
            .price{
              width: 160px;
            }
            .close{
              flex-shrink: 0;
              width: 12px;
              color: #fff;
              cursor:pointer;
            }
            .close:hover{
              color: $font-color-main;
            }
            .invalid{
              position: absolute;
              left: 0;
              top: 0;
              background: rgba(0, 0, 0, 0.3);
              width: 100%;
              height: 100%;
              color: #ffffff;
              font-size: 16px;
              text-align: center;
              padding-top:20px;
            }
          }
          .cart-li:last-child{
            border-bottom:none;
          }
        }
        .msg-empty{
          padding: 20px 0 20px;
          color: #424242;
          text-align: center;
        }
        .cart-total{
          padding: 15px 20px;
          background: #fafafa;
          display: flex;
          .number{
            flex:1;
            font-size: 12px;
            color: #424242;
            .name{
              line-height: normal;
            }
            .price{
              line-height: normal;
              color: $font-color-main;
              span{
                font-size: 22px;
              }
            }
          }
        }
      }
    }
    .cart:hover{
      color: $font-color-main;
    }
    .cart.on{
      background-color: $font-color-main;
      color: #ffffff;
      .cart-navigation{
        color: #ffffff;
      }
    }
  }
}
.gnb_mmbrs{
  display: flex;
  align-items: center;
  color: #888;
  height: 40px;
  &::after{
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border: 1px solid #888;
    border-width: 1px 1px 0 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}
.gnb_mmbrs_txt{
  padding: 0 4px;
    // font-weight: bold;
    font-size: 13px;
    height: 16px;
    line-height: 16px;
}
.gnb_mmbrs_badge {
  .badge_txt {
    color: #fff;
    // font-family: $fontM;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
  }
  // &::before{
  //   content: "";
  //   // background-image: url(data:image/svg+xml;charset=utf8,%3csvg width='8' height='12' viewBox='0 0 8 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0.5 7.18822V1.25H2.39977V7.0908C2.39977 8.23089 2.92052 8.95809 4.00726 8.95809C5.09401 8.95809 5.61476 8.23089 5.61476 7.0908V1.25H7.51453V7.18822C7.51453 9.34895 6.2225 10.75 4.00726 10.75C1.79203 10.75 0.5 9.34895 0.5 7.18822Z' fill='white'/%3e %3c/svg%3e);
  //  background-image: url("data:image/svg+xml;charset=utf8,%3csvg width=\'8\' height=\'12\' viewBox=\'0 0 8 12\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3e%3cpath d=\'M0.5 7.18822V1.25H2.39977V7.0908C2.39977 8.23089 2.92052 8.95809 4.00726 8.95809C5.09401 8.95809 5.61476 8.23089 5.61476 7.0908V1.25H7.51453V7.18822C7.51453 9.34895 6.2225 10.75 4.00726 10.75C1.79203 10.75 0.5 9.34895 0.5 7.18822Z\' fill=\'white\'/%3e %3c/svg%3e");
  //   background-position: center;
  //   background-repeat: no-repeat;
  //   background-size: 100%;
  //   display: -webkit-inline-box;
  //   display: -ms-inline-flexbox;
  //   display: inline-flex;
  //   width: 8px;
  //   height: 12px;
  //   margin: 2px 2px 0 0;
  // }
  display: flex;
  justify-content: center;
  width: 60px;
  height: 16px;
  border-radius: 20px;
  background: linear-gradient(
    90deg,
    #002041 0%,
    #012143 21.53%,
    #04254d 36.92%,
    #0a2d5c 50.25%,
    #133873 62.55%,
    #1e468f 73.83%,
    #2b57b2 85.11%,
    #3b6adb 95.36%,
    #497cff 102.54%
  )
}

.icon_heart::after{
  content: "";
  background-image: url("data:image/svg+xml;charset=utf8,%3csvg width=\'24\' height=\'24\' viewBox=\'0 0 24 24\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3e%3cpath d=\'M12 21.288L4.06802 12.72C2.94002 11.496 2.40002 10.224 2.40002 8.84398C2.40002 5.95198 4.69202 3.59998 7.50002 3.59998C9.44402 3.59998 11.136 4.72798 12 6.38398C12.864 4.72798 14.556 3.59998 16.5 3.59998C19.308 3.59998 21.6 5.95198 21.6 8.84398C21.6 10.224 21.06 11.484 19.944 12.708L12 21.288ZM7.50002 4.79998C5.35202 4.79998 3.60002 6.61198 3.60002 8.84398C3.60002 9.92398 4.03202 10.896 4.94402 11.904L12 19.512L19.056 11.904C19.968 10.896 20.4 9.92398 20.4 8.84398C20.4 6.61198 18.648 4.79998 16.5 4.79998C14.352 4.79998 12.6 6.61198 12.6 8.84398H11.4C11.4 6.61198 9.64802 4.79998 7.50002 4.79998Z\' fill=\'rgb%280%2C0%2C0%29\'%3e%3c/path%3e %3c/svg%3e");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 17px;
    height: 17px 
}
.icon_person::after{
  content: "";
  background-image: url("data:image/svg+xml;charset=utf8,%3csvg width=\'24\' height=\'24\' viewBox=\'0 0 24 24\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3e%3cpath d=\'M20.4 19.2H19.2C19.2 15.24 15.96 12 12 12C8.04004 12 4.80004 15.24 4.80004 19.2H3.60004C3.60004 14.52 7.32004 10.8 12 10.8C16.68 10.8 20.4 14.52 20.4 19.2Z\' fill=\'rgb%280%2C0%2C0%29\'%3e%3c/path%3e %3cpath fill-rule=\'evenodd\' clip-rule=\'evenodd\' d=\'M9 6.60001C9 8.28001 10.32 9.60001 12 9.60001C13.68 9.60001 15 8.28001 15 6.60001C15 4.92001 13.68 3.60001 12 3.60001C10.32 3.60001 9 4.92001 9 6.60001ZM10.2 6.60001C10.2 5.64001 11.04 4.80001 12 4.80001C12.96 4.80001 13.8 5.64001 13.8 6.60001C13.8 7.56001 12.96 8.40001 12 8.40001C11.04 8.40001 10.2 7.56001 10.2 6.60001Z\' fill=\'rgb%280%2C0%2C0%29\'%3e%3c/path%3e %3c/svg%3e");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 17px;
    height: 17px;
}

.icon_truck::after{
  content: "";
  background-image: url("data:image/svg+xml;charset=utf8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M22.8 18H19.8V16.8H21.6V6.00005H9.59996V16.8H16.8V18H8.39996V4.80005H22.8V18Z' fill='rgb%280%2C0%2C0%29'%3e%3c/path%3e %3cpath d='M6.00001 18H1.20001V11.76L5.16001 7.19995H9.48001V8.39995H5.64001L2.40001 12.12V16.8H6.00001V18Z' fill='rgb%280%2C0%2C0%29'%3e%3c/path%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.6 16.8C15.6 18.12 16.68 19.2 18 19.2C19.32 19.2 20.4 18.12 20.4 16.8C20.4 15.48 19.32 14.4 18 14.4C16.68 14.4 15.6 15.48 15.6 16.8ZM16.8001 16.8C16.8001 16.08 17.2801 15.6 18.0001 15.6C18.7201 15.6 19.2001 16.08 19.2001 16.8C19.2001 17.52 18.7201 18 18.0001 18C17.2801 18 16.8001 17.52 16.8001 16.8Z' fill='rgb%280%2C0%2C0%29'%3e%3c/path%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.79999 16.8C4.79999 18.12 5.87999 19.2 7.19999 19.2C8.51999 19.2 9.59999 18.12 9.59999 16.8C9.59999 15.48 8.51999 14.4 7.19999 14.4C5.87999 14.4 4.79999 15.48 4.79999 16.8ZM6.00002 16.8C6.00002 16.08 6.48002 15.6 7.20002 15.6C7.92002 15.6 8.40002 16.08 8.40002 16.8C8.40002 17.52 7.92002 18 7.20002 18C6.48002 18 6.00002 17.52 6.00002 16.8Z' fill='rgb%280%2C0%2C0%29'%3e%3c/path%3e %3c/svg%3e");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 17px;
    height: 17px;
}

.icon_eye::after{
  content: "";
  background-image: url("data:image/svg+xml;charset=utf8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.20001 12C7.20001 14.64 9.36001 16.8 12 16.8C14.64 16.8 16.8 14.64 16.8 12C16.8 9.36 14.64 7.2 12 7.2C9.36001 7.2 7.20001 9.36 7.20001 12ZM8.40004 12C8.40004 9.95999 9.96004 8.39999 12 8.39999C14.04 8.39999 15.6 9.95999 15.6 12C15.6 14.04 14.04 15.6 12 15.6C9.96004 15.6 8.40004 14.04 8.40004 12Z' fill='rgb%280%2C0%2C0%29'%3e%3c/path%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.32002 12.36C1.44002 12.6 5.64002 19.2 12 19.2C18.36 19.2 22.56 12.6 22.68 12.36L22.92 12L22.68 11.64C22.56 11.4 18.36 4.8 12 4.8C5.64002 4.8 1.44002 11.4 1.32002 11.64L1.08002 12L1.32002 12.36ZM12 18C7.08003 18 3.36003 13.32 2.52003 12C3.36003 10.68 7.08003 6 12 6C16.92 6 20.64 10.68 21.48 12C20.64 13.32 16.92 18 12 18Z' fill='rgb%280%2C0%2C0%29'%3e%3c/path%3e %3c/svg%3e");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 17px;
    height: 17px;
}
.icon_cart::after{
  content: "";
  background-image: url("data:image/svg+xml;charset=utf8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='6' y='8.40002' width='14.4' height='1.2' fill='rgb%280%2C0%2C0%29'%3e%3c/rect%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M6 19.2C6 20.52 7.08 21.6 8.4 21.6C9.72 21.6 10.8 20.52 10.8 19.2C10.8 17.88 9.72 16.8 8.4 16.8C7.08 16.8 6 17.88 6 19.2ZM7.20004 19.2C7.20004 18.48 7.68004 18 8.40004 18C9.12004 18 9.60004 18.48 9.60004 19.2C9.60004 19.92 9.12004 20.4 8.40004 20.4C7.68004 20.4 7.20004 19.92 7.20004 19.2Z' fill='rgb%280%2C0%2C0%29'%3e%3c/path%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.6 19.2C15.6 20.52 16.68 21.6 18 21.6C19.32 21.6 20.4 20.52 20.4 19.2C20.4 17.88 19.32 16.8 18 16.8C16.68 16.8 15.6 17.88 15.6 19.2ZM16.8001 19.2C16.8001 18.48 17.2801 18 18.0001 18C18.7201 18 19.2001 18.48 19.2001 19.2C19.2001 19.92 18.7201 20.4 18.0001 20.4C17.2801 20.4 16.8001 19.92 16.8001 19.2Z' fill='rgb%280%2C0%2C0%29'%3e%3c/path%3e %3cpath d='M19.08 15.6H7.32001L4.08001 4.79998H1.20001V3.59998H5.04001L8.28001 14.4H18.12L20.4 7.07998L21.6 7.31998L19.08 15.6Z' fill='rgb%280%2C0%2C0%29'%3e%3c/path%3e %3c/svg%3e");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 17px;
    height: 17px;
}

.icon-flex{
  display: flex;
  align-items: center;
  // padding-top: 3px;
  padding-left: 4px;
  height: 40px;
.icon{
  padding: 0 3px;
}
}

.hap_lang img{
  width: 24px;
  margin-right: 4px;
}